<template>
  <div class="publicOrderStyle" v-for="(data, index) in dataList" :key="index">
    <div class="item">
      <!-- 跑腿模块开始 -->
      <div v-if="data.moduleName === 'runErrand'">
        <div class="head" @click="navToPage(data,data.moduleName)">
          <div class="picBox">
            <div
              class="picBoxBorder"
              :style="`background-color:${data.menu_id[0].bk_color}`"
            >
              <image :src="data.menu_id[0].menu_icon[0].url" class="headPic" />
            </div>
          </div>

          <div class="infoBox">
            <div class="store">
              <div class="line">
                <div class="name">{{ data.menu_id[0].menu_name }}</div>
                <uni-icons type="right" size="13" color="#333"></uni-icons>
              </div>
              <div
                class="status"
                :style="`color:${
                  toggleOrderStatus(data.rider_order_status).color
                }`"
              >
                {{ toggleOrderStatus(data.rider_order_status).text }}
              </div>
            </div>
            <div class="discount" v-if="data.pack_text.length > 0">
              <div
                class="it"
                :style="`color:${it.color};border-color:${it.backColor}`"
                v-for="(it, i) in togglePackText(data.pack_text, data.menu_id)"
                :key="i"
              >
                {{ it.text }}
              </div>
            </div>
          </div>
        </div>

        <div
          class="content"
          v-if="data.menu_id.length > 1"
          @click="viewOrderDetail(data)"
        >
          <div class="myScrollView">
            <scroll-view class="scroll-view_H" :scroll-x="true">
              <view
                class="scroll-view-item_H"
                v-for="(it, i) in data.menu_id"
                :key="i"
              >
                <image
                  src="~@/static/images/example2.png"
                  class="commodityPic"
                />
                <div class="name">
                  {{ it.verify_code }}
                </div>
              </view>
            </scroll-view>

            <div class="floatBox">
              <div class="infoText">共{{ data.menu_id.length }}件</div>
            </div>
          </div>

          <div class="totalBox lineTotalBox">
            <div class="time">
              订单编号: <span>{{ data.order_id }}</span>
            </div>
          </div>
          <div class="totalBox">
            <div class="time">
              下单时间: <span>{{ data.create_date_text }}</span>
            </div>
            <div class="money">
              合计: <span class="moneyText">￥ {{ data.order_all_money }}</span>
            </div>
          </div>
        </div>

        <div @click="viewOrderDetail(data)" class="content" v-else>
          <div class="typeBox">
            <div class="typePic">
              <div
                class="picBoxBorder"
                :style="`background-color:${data.menu_id[0].bk_color}`"
              >
                <image
                  :src="data.menu_id[0].menu_icon[0].url"
                  class="typePicIcon"
                />
              </div>
            </div>
            <div class="infoList">
              <div class="infoIt">
                <div class="infoTtitle">
                  取件码:
                </div> 
                <span>{{ data.menu_id[0].verify_code }}</span>
              </div>

              <div class="infoIt">
                <div class="infoTtitle">
                  订单编号:
                </div> 
                <span>{{ data.order_id }}</span>
              </div>

              <div class="infoIt">
                <div class="infoTtitle">
                  下单时间:
                </div> 
                <span>{{ data.create_date_text }}</span>
              </div>

              <div class="infoIt">
                <div class="infoTtitle">
                  消费金额:
                </div> 
                <span class="moneyText"> ￥ {{ data.order_all_money }}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="doBtnBox">
          <div
            class="nextBtn btn"
            v-if="data.rider_order_status !== 8"
            :class="{ disabledBtn: !data.menu_id[0].menu_status }"
            @click="navToPage(data,data.moduleName)"
          >
            再来一单
          </div>
          <div @click="goToPay(data)" class="payBtn btn" v-else>马上支付</div>
        </div>
      </div>
      <!-- 跑腿模块结束 -->

      <!-- 外卖模块开始 -->
      <div v-else-if="data.moduleName === 'foodTakeout'">
        <div class="head" @click="navToPage(data,data.moduleName)">
          <div class="picBox">
            <div class="picBoxBorder foodModule">
              <image :src="data.product_list[0].store_icon[0].url" class="headPic" mode="aspectFit"/>
            </div>
          </div>

          <div class="infoBox">
            <div class="store">
              <div class="line">
                <div class="name">{{ data.product_list[0].store_name }}</div>
                <uni-icons type="right" size="13" class="rightIcon"></uni-icons>
              </div>
              <div
                class="status"
                :style="`color:${toggleOrderStatus(data.order_status).color}`"
              >
                {{ toggleOrderStatus(data.order_status).text }}
              </div>
            </div>
            <div class="discount">
              <div
                class="publicStatusRowIt"
                v-for="(it, i) in data.store_label"
                :key="i"
              >
                {{ it }}
              </div>
            </div>
          </div>
        </div>

        <div
          class="content"
          @click="viewOrderDetail(data)"
        >
          <div class="myScrollView">
            <scroll-view class="scroll-view_H" :scroll-x="true">
              <view
                class="scroll-view-item_H"
                v-for="(it, i) in data.product_list[0].product_list"
                :key="i"
              >
                <image
                  :src="it.product_icon[0].url"
                  class="commodityPic"
                  mode="aspectFit"
                />
                <div class="name">
                  {{ it.product_name }}
                </div>
              </view>
            </scroll-view>

            <div class="floatBox">
              <div class="infoText">共{{ data.product_list[0].product_list.length }}件</div>
            </div>
          </div>

          <div class="totalBox lineTotalBox">
            <div class="time">
              订单编号: <span>{{ data.order_id }}</span>
            </div>
          </div>
          <div class="totalBox">
            <div class="time">
              下单时间: <span>{{ data.create_date_text }}</span>
            </div>
            <div class="money">
              合计: <span class="moneyText">￥ {{ data.order_all_money }}</span>
            </div>
          </div>
        </div>
        
        <div class="doBtnBox">
          <div
            class="nextBtn btn"
            v-if="data.order_status !== 8"
            @click="navToPage(data,data.moduleName)"
          >
            再来一单
          </div>
          <div @click="goToPay(data)" class="payBtn btn" v-else>马上支付</div>
        </div>

      </div>
    <!-- 外卖模块结束 -->


    </div>
  </div>
</template>

<script src="./order.ts" lang="ts"></script>

<style lang="stylus" scoped>
@import './order.styl';
</style>
